<template>
  <div class="content-box intro-y">
    <hBase :args="args" ref="vhomeRef">
      <template #args>
        <div class="search-container">
          <div class="search-wrapper">
            <!-- 设备目录 -->
            <el-tree-select
              v-model="queryParams.catCode"
              :data="categoryTree"
              placeholder="装备目录"
              clearable
              class="pl-5 search-input"
              check-strictly
              :render-after-expand="false"
              @clear="handleClear"
            />

            <!-- 企业 -->
            <el-input
              v-model="queryParams.companyName"
              placeholder="企业"
              clearable
              class="search-input"
            />

            <!-- 产品 -->
            <el-input
              v-model="queryParams.productName"
              placeholder="产品名称"
              clearable
              class="search-input"
            />

            <!-- 型号 -->
            <el-input
              v-model="queryParams.model"
              placeholder="型号"
              clearable
              class="search-input"
            />

            <!-- 技术指标 -->
            <el-input
              v-model="queryParams.kdj"
              placeholder="技术指标"
              clearable
              class="search-input"
            />

            <!-- 用途 -->
            <el-input
              v-model="queryParams.purpose"
              placeholder="用途"
              clearable
              class="search-input"
            />
          </div>
        </div>
      </template>

      <template #parts>
        <el-table-column prop="catName" label="所属分类" width="180"/>
        <el-table-column prop="companyName" label="企业" width="180"/>
        <el-table-column align="center" label="二维码" width="180">
          <template #default="scope">
            <div class="flex justify-center items-center">
              <img style="width: 40px;height: 40px" alt="" :src="baseUrl+'/UploadFilePath/'+scope.row.qrCode" v-if="scope.row.qrCode"/>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="名称" width="180">
          <template #default="scope">
            <el-tooltip
                class="box-item"
                effect="dark"
                :content="scope.row.productName"
                placement="top-start"
            >
            <span>
              {{ scope.row.productName }}
            </span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="model" label="型号" width="80"/>
        <el-table-column prop="purpose" label="用途" width="120"/>
        <el-table-column label="技术指标" width="120">
          <template #default="scope">
            <el-tooltip
                class="box-item"
                effect="dark"
                :content="scope.row.kdj"
                placement="top-start"
            >
            <span>
              {{ scope.row.kdj }}
            </span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="案例" width="120">
          <template #default="scope">
            <el-tooltip
                class="box-item"
                effect="dark"
                :content="scope.row.case"
                placement="top-start"
            >
            <span>
              {{ scope.row.case }}
            </span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="videoUrl" label="视频链接" width="120"/>
        <el-table-column/>
      </template>
      <template #edit="{ init, close }">
        <edit :init="init" @close="close"></edit>
      </template>
    </hBase>
  </div>
</template>

<script setup>
import {onMounted, computed, ref, watch} from "vue";
import hBase from "../base/hBase.vue";
import * as $api from "@/api/api.js";
import edit from "./Edit.vue"

const userKey = localStorage.getItem("userKey");
const baseUrl = import.meta.env.VITE_APP_API;
const categoryTree = ref([]);

const queryParams = ref({
  catCode: '',
  companyName: '',
  productName: '',
  model: '',
  kdj: '',
  purpose: '',
});

const getCategoryTree = () => {
  $api.CategoryQueryTree({}).then((res) => {
    categoryTree.value = formatTreeData(res.children);
  });
};

const formatTreeData = (data) => {
  return data.map(item => ({
    value: item.catCode,
    label: item.catName,
    children: item.children ? formatTreeData(item.children) : null
  }));
};

watch(() => queryParams.value.catCode, (newVal) => {
  if (newVal !== undefined || newVal === '') {
    const searchArgs = { keyword: '' };
    if (vhomeRef.value) {
      vhomeRef.value.search(searchArgs);
    }
  }
});

const vhomeRef = ref(null);

const handleClear = () => {
  const searchArgs = { keyword: '' };
  if (vhomeRef.value) {
    vhomeRef.value.search(searchArgs);
  }
};

const args = computed(() => {
  return {
    search: $api.ProductQuery,
    remove: $api.ProductDelete,
    hasEdit: false,
    hasRemove: false,
    hasSearch: true,
    hasAdd: false,
    isView: true,
    width: 80,
    hasKeyword: false,
    customSearch: (searchArgs) => {
      const items = [];
      
      if (queryParams.value.catCode) {
        items.push({
          name: 'catCode',
          value: queryParams.value.catCode,
          compareMode: 1 // Equal
        });
      }

      if (queryParams.value.companyName) {
        items.push({
          name: 'companyName',
          value: queryParams.value.companyName,
          compareMode: 1024 // Like
        });
      }
      
      if (queryParams.value.productName) {
        items.push({
          name: 'productName',
          value: queryParams.value.productName,
          compareMode: 1024 // Like
        });
      }

      if (queryParams.value.model) {
        items.push({
          name: 'model',
          value: queryParams.value.model,
          compareMode: 1024 // Like
        });
      }

      if (queryParams.value.kdj) {
        items.push({
          name: 'kdj',
          value: queryParams.value.kdj,
          compareMode: 1024 // Like
        });
      }

      if (queryParams.value.purpose) {
        items.push({
          name: 'purpose',
          value: queryParams.value.purpose,
          compareMode: 1024 // Like
        });
      }

      if (searchArgs?.keyword) {
        items.push({
          name: 'keyword',
          value: searchArgs.keyword,
          compareMode: 1024 // Like
        });
      }

      return $api.ProductQueryCondition({
        userKey: userKey,
        items
      });
    }
  };
});

onMounted(async () => {
  try {
    // const response = await $api.getCategoryOptions();
    // categoryOptions.value = response.data;
    getCategoryTree();
  } catch (error) {
    console.error('Failed to fetch category options:', error);
  }
});
</script>

<style scoped lang="scss">
:deep().el-table {
  height: 100%;
  .cell {
    height: 48px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}

.search-container {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  :deep(.el-select) {
    width: 180px !important;
    margin-right: 15px;
  }

  .search-input {
    :deep(.el-input__wrapper),
    :deep(.el-select .el-input__wrapper),
    :deep(.el-select),
    :deep(.el-tree-select) {
      width: 180px !important;
      min-width: 180px !important;
      height: 38px !important;
      flex-shrink: 0;
    }
    
    :deep(.el-input__inner) {
      height: 38px !important;
      line-height: 38px !important;
    }
    
    :deep(.el-select__wrapper) {
      width: 180px !important;
      height: 38px !important;
    }
  }
  
  :deep(.el-select-dropdown__wrap) {
    max-width: 180px;
  }

  &::-webkit-scrollbar {
    height: 6px;
  }

  &::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
}

.search-wrapper {
  min-width: min-content;
  padding-right: 15px;
  gap: 15px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

@media screen and (max-width: 1800px) {
  .search-input {
    margin-bottom: 0;
  }
}

@media screen and (max-width: 768px) {
  .search-wrapper {
    flex-direction: row;
    align-items: center;
  }

  .search-container {
    .search-input {
      :deep(.el-input__wrapper),
      :deep(.el-select .el-input__wrapper),
      :deep(.el-select),
      :deep(.el-tree-select) {
        width: 180px !important;
        min-width: 180px !important;
      }
    }
  }
}
</style>